<div class="color-picker-root">
  <h3 class="first">Inline</h3>
  <p-colorPicker [(ngModel)]="color1" inline="true"></p-colorPicker>

  <p style="margin-top:.5em">Selected Color:
    <span style="display:inline-block;width:32px;height:32px;vertical-align:middle" [style.backgroundColor]="color1"></span>
    <span>{{color1}}</span>
  </p>

  <h3>Overlay</h3>
  <p-colorPicker [(ngModel)]="color2"></p-colorPicker>
  <p style="margin-top:.5em">Selected Color:
    <span [ngStyle]="{'color':color2}">{{color2}}</span>
  </p>
</div>
